<template>
  <div class="rate">
    <el-row>
      <!-- 不区分颜色 -->
      <el-col>
        <el-rate v-model="value1"></el-rate>
      </el-col>

      <!-- 区分颜色 -->
      <el-col>
        <el-rate v-model="value2" :colors="colors"></el-rate>
      </el-col>

      <!-- 给评论添加文字 -->
      <el-col>
        <el-rate v-model="value3" show-text :colors="colors"></el-rate>
      </el-col>

      <!-- 只读 -->
      <el-col>
        <el-rate v-model="value4" :colors="colors" show-score disabled=""></el-rate>
      </el-col>

    </el-row>
    
  </div>
</template>

<script>
  export default {
    name: 'Rate',
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: 3.7,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      }
    },
  }
</script>

<style scope>
.el-col{
  margin:10px 0;
}

</style>